﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="/static/css/table.css"
              type="text/css"></link>
        <!--以下3个js库必须按照顺序引入-->
        <!--vue脚本库-->
        <script type="text/javascript"
                src="/static/js/vue-3.2.4.global.js">
            <!--axios脚本库-->
        </script>
        <script type="text/javascript"
                src="/static/js/axios-0.18.0.min.js">
        </script>
        <!--我们自己封装的axios函数库 -->
        <script type="text/javascript"
                src="/static/js/axios-helper.js">
        </script>
    </head>
    <body id="app">
            <form >
                <table width="100%">
                    <tr>
                        <td>
                            <font color="black">您正在做的业务是：人力资源--调动管理--调动审核列表</font>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            当前待复核的调动人数:{{sum}}例
                        </td>
                    </tr>
                </table>
                <table width="100%" border="1" cellpadding=0 cellspacing=1
                       bordercolorlight=#848284 bordercolordark=#eeeeee
                       class="TABLE_STYLE1">
                    <tr height="21">
                        <td width="19%" class="TD_STYLE1">
                            I级机构
                        </td>
                        <td width="19%" class="TD_STYLE1">
                            II级机构
                        </td>
                        <td width="19%" class="TD_STYLE1">
                            Ⅲ级机构
                        </td>
                        <td width="19%" class="TD_STYLE1">
                            薪酬标准
                        </td>
                        <td width="19%" class="TD_STYLE1">
                            名字
                        </td>
                        <td width="5%" class="TD_STYLE1">
                            审核
                        </td>

                    </tr>


                    <tr height="21" v-for="item in majorChangeList">
                        <td class="TD_STYLE2">
                            {{item.firstKindName}}
                        </td>
                        <td class="TD_STYLE2">
                            {{item.secondKindName}}
                        </td>
                        <td class="TD_STYLE2">
                            {{item.thirdKindName}}
                        </td>
                        <td class="TD_STYLE2">
                            {{item.salaryStandardName}}
                        </td>
                        <td class="TD_STYLE2">
                            {{item.humanName}}
                        </td>
                        <td class="TD_STYLE2">
                            <a href="javascript:void(0)" @click="examine(item.mchid)">审核</a>
                        </td>
                    </tr>
                </table>
            <p>
                <div align="center" style="font-size: 18px;color: gray">
                    &nbsp;&nbsp;总数：
                    <font style="color: maroon;font-weight: bold;">{{sum}}</font>
                    例
                    &nbsp;&nbsp;&nbsp;
                    每页显示 <font style="color: maroon;font-weight: bold;">{{page.size}}</font>
                    条
                    &nbsp;&nbsp;&nbsp;
                    当前第 <font style="color: maroon;font-weight: bold;">{{page.current}}</font>
                    页
                    &nbsp;&nbsp;&nbsp;共
                    <font style="color: maroon;font-weight: bold;">{{maxPage}}</font>
                    页&nbsp;&nbsp;
                    <a style="color: navy;font-weight: bold" href="javascript:void(0)" @click="goto(1)">首页</a>
                    &nbsp;&nbsp;
                    <a style="color: navy;font-weight: bold" href="javascript:void(0)" @click="previous()">上一页</a>
                    &nbsp;&nbsp;
                    <a style="color: navy;font-weight: bold" href="javascript:void(0)" @click="next()">下一页</a>
                    &nbsp;&nbsp;
                    <a style="color: navy;font-weight: bold" href="javascript:void(0)" @click="goto(maxPage)">末页</a>
                    &nbsp;&nbsp;&nbsp;跳到第
                    <input  type=text v-model="appoint" size=1>
                    页&nbsp;&nbsp;
                    <input type="image" @click="goApp()" src="/static/images/go.bmp" width=18 height=18 border=0>
                    <input type="hidden" >
                </div>
            </form>
    </body>
    <script type="module">
        Vue.createApp({
            data(){
                return{
                    //数据列表
                    majorChangeList:[],
                    //数据总数
                    sum:null,
                    //分页对象
                    page:{
                        current:1,
                        size:2
                    },
                    //最大页码数
                    maxPage:null,
                    //指定跳转页码数
                    appoint:null
                }
            },
            methods:{
                loadMajorChangeList(){
                    requestGet("/majorChange/queryList",this.page).then((data)=>{
                        console.info(data);
                        this.majorChangeList=data.records;
                        this.sum=data.total;
                        this.maxPage=Math.ceil(data.total/data.size);
                    })
                },
                //跳转指定页码
                goto(num){
                    //设置查询条件中的当前页码
                    this.page.current=num;
                    //查询
                    this.loadMajorChangeList();
                },
                previous(){
                    let cur=this.page.current;
                    cur=(cur-1) < 1 ? 1:(cur-1);
                    //将当前页码数赋值到模型层
                    this.page.current=cur;
                    //重新查询
                    this.loadMajorChangeList();
                },
                next(){
                    let cur=this.page.current;
                    cur=(cur+1) > this.maxPage? this.maxPage:(cur+1);
                    //将当前页码数赋值到模型层
                    this.page.current=cur;
                    //重新查询
                    this.loadMajorChangeList();
                },
                goApp(){
                    console.info("***appoint",this.appoint);
                    //跳转指定页码数
                    let cur=this.page.current;
                    cur=this.appoint;
                    this.page.current=cur;
                    //重新查询
                    this.loadMajorChangeList();
                },
                examine(mchid){
                    sessionStorage.setItem("mchid",mchid);
                    console.info(mchid);
                    window.location.href="/templates/page/transfer/check.html";
                }
            },
            created(){
                this.loadMajorChangeList();
            }
        }).mount("#app");
    </script>
</html>



